<template>
  <!---->
  <v-card>
    <!--  -->
    <v-card-title class="layout row">
      <v-btn color="primary" @click="addBrand">
        新增品牌
      </v-btn>
      <!--填充间距-->
      <v-spacer></v-spacer>
      <!--搜索框-->
      <v-text-field class="flex sm2"  label="请输入搜索条件" single-line hide-details
                    append-icon="search" v-model="search"></v-text-field>
    </v-card-title>
    <!--v-divider 分隔线-->
    <v-divider/>
    <!--headers 代表表头， total-items    elevation 悬浮效果-->
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1">

      <!-- slot 插槽，一个组件的内部模块，-->
      <!--items 表格的数据的数组， 数组的每个元素是一行数据的对象，对象的key要与表头的value 一致-->
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image"/></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <!-- px 间距-->
        <td class="justify-center layout px-1">
          <v-btn small icon class="mx-0" @click="editBrand(props.item)">
            <v-icon color="success">edit</v-icon>
          </v-btn>
          <v-btn small icon class="mx-0" @click="deleteBrand(props.item)">
            <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>

    <!--对话框 v-dialog 通过value 可以控制其可见性 此处v-model 就是绑定value的值， 所以使用v-model 即可
     persistent：默认为false ,点击对话框外部不能使其关闭
     -->
    <v-dialog v-model="show" max-width="650" scrollable persistent >
      <v-card> <!-- v-card 卡片 -->
        <!-- 工具栏的头部 dense：减小工具栏内容和扩展的高度  dark: 应用暗黑主题变体  color:将指定的色彩应用与控件  -->
        <v-toolbar dense color="primary" dark class="subheading px-2">
            <span>{{isEdit ? '修改' : '新增'}}品牌</span>
          <!--自动填充中间的部分-->
            <v-spacer/>
          <!-- 关闭按钮 -->
            <v-btn icon @click="closeWindow">
              <v-icon>close</v-icon>
            </v-btn>
        </v-toolbar>

        <!-- 对话框的内容， 表单 -->
        <v-card-text style="height: 600px" class="px-5">
          <!-- 引入组件 -->
          <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit" />

        </v-card-text>
      </v-card>
    </v-dialog>

  </v-card>
</template>

<script>

  // 导入 表单组件
  //import MyBrandForm from './MyBrandForm'
  export default {
    name: "my-brand",
    data() {
      return {
        // 定义表头的数组，数组的每个元素就是一个头信息对象  text: string 表头的显示文本， value :string 表头对应的每行数据的key  align 位置 sortable : 是否可排序  class: string[] string, 样式  width: string 宽度
        headers: [
          {text: "品牌id",    value: "id",   align: 'center', sortable: true},
          {text: "品牌名称",  value: "name",     align: 'center', sortable: false},
          {text: "品牌LOGO",  value: "image",    align: 'center', sortable: false},
          {text: "品牌首字母", value: "letter",  align: 'center', sortable: false},
          {text: "操作",                     align: 'center', sortable: false},
        ],

        brands: [],
        // loading 是否显示加载数据的精度条，默认为false
        // no-data-text 当没有查询到数据时显示的提示信息，string类型，无默认值
        loading: true,
        // pagination.sync 包含分页和排序信息的对象，将其与vue 实例中的属性关联，表格的分页或排序按钮被触发时，会自动将最新的分页和排序信息更新。对象结构
        pagination: {
          // page 1 当前页， rowsPerPage 每页大小 sortBy 排序字段  descending 是否降序
        },
        // total-items 每页的总条数信息，number 类型， 无默认值
        totalBrands: 0,
        // select-all 是否显示每一行的复选框，Boolean类型， 无默认值
        // value 当表格可选的时候， 返回选中的行
        search: "",
        show: false, // 窗口显示，控制对话框的显示（默认为false）
        oldBrand: {}, // 即将被编辑的品牌数据
        isEdit: false, // 是否编辑
      }
    },
    watch: {
      search(){
        // 把分页置为1 首页
        this.pagination.page = 1 ;
        this.getDataFormServer();
      },
      pagination: {
        deep: true,
        handler() {
          this.getDataFormServer();
        }
      },
      oldBrand: {
        deep: true,
        handler() {
          //console.log("监控oldBrand变化: " + JSON.stringify(this.oldBrand));
        }
      }
    },
    created() {
      this.getDataFormServer();
    },
    methods: {
      getDataFormServer() { // 从服务 加载数据的方法
        // 开启进度条
        this.loading = true;

        // 模拟加载数据
       /* const brands = [
          {
            "id": 2032,
            "name": "OPP0",
            "image": "http://192.168.229.1:8080/img/logo.82b9c7a5.png",
            "letter": "0"
          }
        ];*/

       // 发起请求
       // page rows search sortBy descending
        this.$http.get("/item/brand/page", {
          params: {
            page: this.pagination.page,         // 当前页
            rows: this.pagination.rowsPerPage , //  每页大小
            sortBy: this.pagination.sortBy,     //  排序字段
            desc: this.pagination.descending,   //  是否降序
            key: this.search,                   //  搜索条件
          }
        }).then(resp => {   // 这里使用箭头函数
          // 赋值 将得到的数据赋值给本地属性
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          //console.log(resp.data);
          // 把进度条关闭，完成赋值后，将加载状态赋值为false
          this.loading = false ;
        });

        /*setTimeout(() => {
          this.brands = brands;
          this.totalBrands = 10;
          // 关闭进度条
          this.loading = false;
        }, 300);*/

      },
      addBrand(){
        // 修改标记  新增前修改为false
        this.isEdit = false ;
        // 控制弹窗可见
        this.show = true;
        // 把oldBrand变为null
        this.oldBrand = null ;
      },
      editBrand(rand){
        // 根据品牌信息查询商品分类
        this.$http.get("/item/category/bid/"+rand.id)
          .then(({data})=>{
            // 修改标记, 编辑前修改为 true
            this.isEdit = true ;
            // 控制弹窗可见
            this.show = true;
            // 获取要编辑的brand
            this.oldBrand = rand;
            // console.log("oldbrand="+JSON.stringify(oldBrand));
            // console.log("oldbrand="+JSON.stringify(oldBrand));
            // 回显商品分类
            this.oldBrand.categories = data ;
          });

      },
      deleteBrand(item){
        this.$message.confirm('此操作将永久删除该品牌, 是否继续?').then(() => {
          // 发起删除请求
          this.$http.delete("/item/brand?id=" + item.id,)
            .then(() => {
              // 删除成功，重新加载数据
              this.$message.success("删除成功！");

              // 重新加载数据
              this.getDataFormServer();
            })
        }).catch(() => {
          this.$message.info("删除已取消！");
        });

      },
      closeWindow(){
        // 关闭窗口
        this.show = false;
        // 清空图片位置

        // 重新加载数据
        this.getDataFormServer();
      }
    },
    components: {
      /* 导入注册另外一个 表单组件
       *  导入自定义的表单组件
       */
     MyBrandForm: () => import('./MyBrandForm')
     // MyBrandForm
    }
  }
</script>

<style scoped>

</style>
